<!DOCTYPE html>
<html>
<head>
	<title>历史订单查询 - 雁农冷链平台</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
	<!-- 所有的 css -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui@2.13.0/lib/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/css/admin.css">
	<style>
		.order-history-container {
			padding: 20px;
			max-width: 1400px;
			margin: 0 auto;
		}
		.search-section {
			margin-bottom: 25px;
			padding: 25px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
		}
		.stats-section {
			margin-bottom: 25px;
		}
		.stat-card {
			padding: 20px;
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			text-align: center;
			transition: all 0.3s ease;
			cursor: pointer;
		}
		.stat-card:hover {
			transform: translateY(-3px);
			box-shadow: 0 8px 25px rgba(0,0,0,0.15);
		}
		.stat-card.active {
			border: 2px solid #409EFF;
		}
		.stat-number {
			font-size: 28px;
			font-weight: bold;
			margin-bottom: 8px;
		}
		.stat-label {
			color: #666;
			font-size: 14px;
		}
		.orders-section {
			background: #fff;
			border-radius: 12px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.1);
			overflow: hidden;
		}
		.section-header {
			padding: 20px 25px;
			background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
			color: white;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.order-item {
			padding: 20px 25px;
			border-bottom: 1px solid #f0f0f0;
			transition: all 0.3s ease;
		}
		.order-item:hover {
			background: #f8f9fa;
		}
		.order-item:last-child {
			border-bottom: none;
		}
		.order-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 15px;
		}
		.order-info {
			flex: 1;
		}
		.order-no {
			font-weight: bold;
			color: #333;
			font-size: 16px;
			margin-bottom: 5px;
		}
		.order-time {
			color: #909399;
			font-size: 14px;
		}
		.order-status {
			padding: 6px 12px;
			border-radius: 15px;
			font-size: 12px;
			font-weight: bold;
		}
		.status-pending {
			background: #fdf6ec;
			color: #e6a23c;
		}
		.status-paid {
			background: #f0f9ff;
			color: #409eff;
		}
		.status-shipped {
			background: #e1f3d8;
			color: #67c23a;
		}
		.status-delivered {
			background: #f4f4f5;
			color: #909399;
		}
		.status-cancelled {
			background: #fef0f0;
			color: #f56c6c;
		}
		.order-products {
			margin-bottom: 15px;
		}
		.product-item {
			display: flex;
			align-items: center;
			margin-bottom: 10px;
			padding: 10px;
			background: #f8f9fa;
			border-radius: 8px;
		}
		.product-image {
			width: 60px;
			height: 60px;
			background: #e4e7ed;
			border-radius: 6px;
			margin-right: 15px;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #909399;
			font-size: 24px;
		}
		.product-details {
			flex: 1;
		}
		.product-name {
			font-weight: 500;
			color: #333;
			margin-bottom: 5px;
		}
		.product-spec {
			color: #666;
			font-size: 14px;
		}
		.product-price {
			color: #f56c6c;
			font-weight: bold;
			font-size: 16px;
		}
		.order-summary {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding-top: 15px;
			border-top: 1px solid #f0f0f0;
		}
		.order-total {
			font-size: 18px;
			font-weight: bold;
			color: #f56c6c;
		}
		.order-actions {
			display: flex;
			gap: 10px;
		}
		.pagination-section {
			margin-top: 25px;
			text-align: center;
		}
		.empty-state {
			padding: 80px 20px;
			text-align: center;
			color: #999;
		}
		.empty-icon {
			font-size: 64px;
			margin-bottom: 20px;
			color: #ddd;
		}
	</style>
</head>
<body>
	<div id="app" class="vue-admin-beautiful-wrapper">
		<div class="order-history-container">
			<!-- 搜索区域 -->
			<div class="search-section">
				<h2 style="margin-bottom: 20px; color: #333;">📋 历史订单查询</h2>
				<el-form :inline="true" :model="searchForm" label-width="80px">
					<el-form-item label="订单号">
						<el-input v-model="searchForm.orderNo" placeholder="请输入订单号" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="商品名称">
						<el-input v-model="searchForm.productName" placeholder="请输入商品名称" style="width: 200px;"></el-input>
					</el-form-item>
					<el-form-item label="订单状态">
						<el-select v-model="searchForm.status" placeholder="请选择状态" style="width: 150px;">
							<el-option label="全部" value=""></el-option>
							<el-option label="待付款" value="pending"></el-option>
							<el-option label="已付款" value="paid"></el-option>
							<el-option label="已发货" value="shipped"></el-option>
							<el-option label="已送达" value="delivered"></el-option>
							<el-option label="已取消" value="cancelled"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="下单时间">
						<el-date-picker
							v-model="searchForm.dateRange"
							type="daterange"
							range-separator="至"
							start-placeholder="开始日期"
							end-placeholder="结束日期"
							style="width: 240px;">
						</el-date-picker>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="searchOrders" :loading="loading">查询</el-button>
						<el-button @click="resetForm">重置</el-button>
						<el-button type="success" @click="exportOrders">导出</el-button>
					</el-form-item>
				</el-form>
			</div>

			<!-- 统计卡片 -->
			<el-row :gutter="20" class="stats-section">
				<el-col :span="4" v-for="(stat, index) in stats" :key="index">
					<div 
						:class="['stat-card', {active: selectedStat === stat.key}]"
						@click="filterByStatus(stat.key)"
					>
						<div class="stat-number" :style="{color: stat.color}">{{ stat.count }}</div>
						<div class="stat-label">{{ stat.label }}</div>
					</div>
				</el-col>
			</el-row>

			<!-- 订单列表 -->
			<div class="orders-section">
				<div class="section-header">
					<h3 style="margin: 0;">📦 订单列表 (共{{ filteredOrders.length }}条)</h3>
					<div>
						<el-button size="small" @click="refreshOrders" type="text" style="color: white;">
							<i class="el-icon-refresh"></i> 刷新
						</el-button>
					</div>
				</div>

				<!-- 订单列表内容 -->
				<div v-if="filteredOrders.length > 0">
					<div class="order-item" v-for="order in paginatedOrders" :key="order.id">
						<div class="order-header">
							<div class="order-info">
								<div class="order-no">订单号：{{ order.orderNo }}</div>
								<div class="order-time">下单时间：{{ order.createTime }}</div>
							</div>
							<div :class="'order-status status-' + order.status">{{ order.statusText }}</div>
						</div>

						<div class="order-products">
							<div class="product-item" v-for="product in order.products" :key="product.id">
								<div class="product-image">{{ product.icon }}</div>
								<div class="product-details">
									<div class="product-name">{{ product.name }}</div>
									<div class="product-spec">规格：{{ product.spec }} | 数量：{{ product.quantity }}</div>
								</div>
								<div class="product-price">¥{{ product.price }}</div>
							</div>
						</div>

						<div class="order-summary">
							<div class="order-total">订单总额：¥{{ order.totalAmount }}</div>
							<div class="order-actions">
								<el-button size="small" @click="viewOrderDetail(order)">查看详情</el-button>
								<el-button size="small" type="primary" @click="trackOrder(order)" v-if="order.status === 'shipped'">物流跟踪</el-button>
								<el-button size="small" type="success" @click="confirmReceipt(order)" v-if="order.status === 'shipped'">确认收货</el-button>
								<el-button size="small" type="warning" @click="applyRefund(order)" v-if="order.status === 'delivered'">申请退款</el-button>
								<el-button size="small" @click="buyAgain(order)">再次购买</el-button>
							</div>
						</div>
					</div>
				</div>

				<!-- 空状态 -->
				<div v-else class="empty-state">
					<div class="empty-icon">📦</div>
					<p>暂无订单数据</p>
					<el-button type="primary" @click="goShopping">去购物</el-button>
				</div>
			</div>

			<!-- 分页 -->
			<div class="pagination-section" v-if="filteredOrders.length > 0">
				<el-pagination
					@size-change="handleSizeChange"
					@current-change="handleCurrentChange"
					:current-page="currentPage"
					:page-sizes="[10, 20, 50, 100]"
					:page-size="pageSize"
					layout="total, sizes, prev, pager, next, jumper"
					:total="filteredOrders.length">
				</el-pagination>
			</div>
		</div>
	</div>

	<!-- 所有的 js -->
	<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
	<script src="https://unpkg.com/element-ui@2.13.0/lib/index.js"></script>
	<script>
		new Vue({
			el: '#app',
			data: {
				searchForm: {
					orderNo: '',
					productName: '',
					status: '',
					dateRange: []
				},
				loading: false,
				selectedStat: '',
				currentPage: 1,
				pageSize: 10,
				stats: [
					{key: '', label: '全部订单', count: 25, color: '#409EFF'},
					{key: 'pending', label: '待付款', count: 3, color: '#E6A23C'},
					{key: 'paid', label: '已付款', count: 2, color: '#409EFF'},
					{key: 'shipped', label: '已发货', count: 8, color: '#67C23A'},
					{key: 'delivered', label: '已送达', count: 10, color: '#909399'},
					{key: 'cancelled', label: '已取消', count: 2, color: '#F56C6C'}
				],
				orders: [
					{
						id: 1,
						orderNo: 'YN202401190001',
						status: 'shipped',
						statusText: '已发货',
						createTime: '2024-01-19 09:00:00',
						totalAmount: '31.6',
						products: [
							{id: 1, name: '有机生菜', spec: '500g/袋', quantity: 2, price: '15.8', icon: '🥬'}
						]
					},
					{
						id: 2,
						orderNo: 'YN202401180002',
						status: 'delivered',
						statusText: '已送达',
						createTime: '2024-01-18 14:30:00',
						totalAmount: '45.0',
						products: [
							{id: 2, name: '有机白菜', spec: '1kg/袋', quantity: 1, price: '22.0', icon: '🥬'},
							{id: 3, name: '有机胡萝卜', spec: '500g/袋', quantity: 1, price: '23.0', icon: '🥕'}
						]
					},
					{
						id: 3,
						orderNo: 'YN202401170003',
						status: 'pending',
						statusText: '待付款',
						createTime: '2024-01-17 16:20:00',
						totalAmount: '68.5',
						products: [
							{id: 4, name: '有机苹果', spec: '1kg/盒', quantity: 1, price: '35.0', icon: '🍎'},
							{id: 5, name: '有机香蕉', spec: '1kg/把', quantity: 1, price: '33.5', icon: '🍌'}
						]
					},
					{
						id: 4,
						orderNo: 'YN202401160004',
						status: 'cancelled',
						statusText: '已取消',
						createTime: '2024-01-16 11:45:00',
						totalAmount: '28.0',
						products: [
							{id: 6, name: '有机西红柿', spec: '500g/盒', quantity: 2, price: '14.0', icon: '🍅'}
						]
					},
					{
						id: 5,
						orderNo: 'YN202401150005',
						status: 'paid',
						statusText: '已付款',
						createTime: '2024-01-15 08:30:00',
						totalAmount: '52.8',
						products: [
							{id: 7, name: '有机土豆', spec: '1kg/袋', quantity: 2, price: '18.0', icon: '🥔'},
							{id: 8, name: '有机洋葱', spec: '500g/袋', quantity: 1, price: '16.8', icon: '🧅'}
						]
					}
				]
			},
			computed: {
				filteredOrders() {
					let filtered = this.orders;
					
					// 按状态筛选
					if (this.searchForm.status) {
						filtered = filtered.filter(order => order.status === this.searchForm.status);
					}
					
					// 按订单号筛选
					if (this.searchForm.orderNo) {
						filtered = filtered.filter(order => 
							order.orderNo.toLowerCase().includes(this.searchForm.orderNo.toLowerCase())
						);
					}
					
					// 按商品名称筛选
					if (this.searchForm.productName) {
						filtered = filtered.filter(order => 
							order.products.some(product => 
								product.name.toLowerCase().includes(this.searchForm.productName.toLowerCase())
							)
						);
					}
					
					// 按时间范围筛选
					if (this.searchForm.dateRange && this.searchForm.dateRange.length === 2) {
						const startDate = this.searchForm.dateRange[0];
						const endDate = this.searchForm.dateRange[1];
						filtered = filtered.filter(order => {
							const orderDate = new Date(order.createTime);
							return orderDate >= startDate && orderDate <= endDate;
						});
					}
					
					return filtered;
				},
				paginatedOrders() {
					const start = (this.currentPage - 1) * this.pageSize;
					const end = start + this.pageSize;
					return this.filteredOrders.slice(start, end);
				}
			},
			methods: {
				searchOrders() {
					this.loading = true;
					this.currentPage = 1;
					// 模拟搜索延迟
					setTimeout(() => {
						this.loading = false;
						this.$message.success(`找到 ${this.filteredOrders.length} 条订单`);
					}, 500);
				},
				resetForm() {
					this.searchForm = {
						orderNo: '',
						productName: '',
						status: '',
						dateRange: []
					};
					this.selectedStat = '';
					this.currentPage = 1;
				},
				filterByStatus(status) {
					this.selectedStat = status;
					this.searchForm.status = status;
					this.currentPage = 1;
				},
				exportOrders() {
					this.$message.success('订单数据导出中...');
					// 这里可以实现真实的导出功能
				},
				refreshOrders() {
					this.$message.info('正在刷新订单数据...');
					// 这里可以调用API刷新数据
					setTimeout(() => {
						this.$message.success('订单数据已刷新');
					}, 1000);
				},
				viewOrderDetail(order) {
					this.$message.info(`查看订单 ${order.orderNo} 详情`);
					// 这里可以跳转到订单详情页面
				},
				trackOrder(order) {
					this.$message.info(`跟踪订单 ${order.orderNo} 物流`);
					// 这里可以跳转到物流跟踪页面
				},
				confirmReceipt(order) {
					this.$confirm('确认收到商品了吗？', '确认收货', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						order.status = 'delivered';
						order.statusText = '已送达';
						this.$message.success('确认收货成功');
					}).catch(() => {});
				},
				applyRefund(order) {
					this.$message.info(`申请退款订单 ${order.orderNo}`);
					// 这里可以跳转到退款申请页面
				},
				buyAgain(order) {
					this.$message.success('商品已加入购物车');
					// 这里可以实现再次购买功能
				},
				goShopping() {
					this.$message.info('跳转到商品页面');
					// 这里可以跳转到商品列表页面
				},
				handleSizeChange(val) {
					this.pageSize = val;
					this.currentPage = 1;
				},
				handleCurrentChange(val) {
					this.currentPage = val;
				}
			}
		});
	</script>
</body>
</html>